<template>
	<div>
        <!-- 操作数据 -->
		<div style="margin-top:20px;">
			<el-form :inline="true" :model="form.search" ref="form.search" :rules="rules.search">
	            <el-form-item label="产品名称" prop="name">
	                <el-input placeholder="产品名称" v-model="form.search.name"></el-input>
	            </el-form-item>
				<el-form-item label="主要技术路径" prop="techRoute">
	                <el-select v-model="form.search.techRoute" placeholder="请选择">
	                	<el-option value="-1" label="全部"></el-option>
	                    <el-option v-for="item in initData.techRoute" :label="item.name" :value="item.id" :key="item.id">
	                    </el-option>
	                </el-select>
	            </el-form-item>
	            <el-form-item label="负责人" prop="user">
	                <el-input placeholder="负责人" v-model="form.search.user"></el-input>
	            </el-form-item>
	            <el-form-item>
	                <el-button type="primary" @click="resetForm('form.search')">重置</el-button>
	                <el-button type="primary" @click="searchForm">查找</el-button>
	                <el-button type="primary" @click="openDialog('addProductDialog')">新增</el-button>
	            </el-form-item>
	        </el-form>
		</div>
        <!-- 产品列表 -->
        <div>
            <el-table :data="tableData" style="width: 100%">
		    	<el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="date" label="名称">
                </el-table-column>
                <el-table-column prop="date" label="主要技术路径">
                </el-table-column>
                <el-table-column prop="name" label="负责人">
                </el-table-column>
                <el-table-column prop="date" label="操作">
                	<template scope="scope">
	            		<el-button type="primary" size="small" @click="openDialog('changeUserDialog')">变更负责人</el-button>
	            		<el-button type="primary" size="small"  @click="openDialog('editProductDialog')">编辑</el-button>
	            		<el-button type="primary" size="small">禁用</el-button>
	            		<el-button type="primary" size="small">修改记录</el-button>
            		</template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 产品添加 -->
		<el-dialog title="添加产品" :visible.sync="dialog.addProductDialog.open" :modal="false" size="full" v-if="dialog.addProductDialog.open">
			<addProductDialog @closeDialog="closeDialog('addProductDialog')"></addProductDialog>
		</el-dialog>
		<!-- 变更负责人 -->
		<el-dialog title="变更负责人" :visible.sync="dialog.changeUserDialog.open" size="tiny" v-if="dialog.changeUserDialog.open">
			<el-form>
				<el-form-item label="负责人选择">
	                <el-select v-model="form.changeUser.user" placeholder="请选择负责人">
	                    <el-option v-for="item in initData.userList" :label="item.name" :value="item.id" :key="item.id">
	                    </el-option>
	                </el-select>
	            </el-form-item>
	            <el-form-item>
	                <div style="text-align:center">
	                    <el-button type="primary" @click="closeDialog('changeUserDialog')">取消</el-button>
	                    <el-button type="primary" @click="dialogBtnOk('changeUserDialog')">提交</el-button>
	                </div>
	            </el-form-item>
            </el-form>
		</el-dialog>
		<!-- 产品编辑 -->
		<el-dialog title="编辑产品" :visible.sync="dialog.editProductDialog.open" :modal="false" size="full" v-if="dialog.editProductDialog.open">
			<editProductDialog></editProductDialog>
		</el-dialog>
	</div>
</template>
<script>
import addProductDialog from '@/components/product/add.vue'
import editProductDialog from '@/components/product/edit.vue'
//富文本
import '@/assets/ueditor/ueditor.config.js'
import '@/assets/ueditor/ueditor.all.min.js'
import '@/assets/ueditor/ueditor.parse.min.js'
import '@/assets/ueditor/lang/zh-cn/zh-cn.js'
export default{
	components:{addProductDialog,editProductDialog},
	data(){
		return{
			dialog:{
				addProductDialog:{
					open:false
				},
				changeUserDialog:{
					open:false
				},
				editProductDialog:{
					open:false
				}
			},
			form:{
				changeUser:{
					user:''
				},
				search:{
					name:'',
					techRoute:'-1',
					user:''
				}
			},
			initData:{
				userList:[],
				techRoute:[]
			},
			rules:{
				search:{}
			},
			tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
		}
	},
	methods:{
		openDialog(dialog){
			this.dialog[dialog].open = true
		},
		closeDialog(dialog){
			this.dialog[dialog].open = false
		},
		dialogBtnOk(dialog){
			if (dialog == 'changeUserDialog') {
				this.closeDialog(dialog)
			}
		},
		resetForm(formName){
			this.$refs[formName].resetFields();
		},
		searchForm(){
			console.log(this.form.search)
		}
	}
}	
</script>